<template>
  <!-- 试题录入 -->
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>试题录入</span>
      </div>
      <!-- 表单 -->
      <el-form label-width="80px" :model="form" :rules="rules" ref="form">
        <!-- 学科 -->
        <el-form-item label="学科:" prop="subject">
          <el-select
            v-model="form.subject"
            placeholder="请选择"
            @change="getSubject"
          >
            <el-option
              v-for="item in SubjectSimpleList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 目录 -->
        <el-form-item label="目录:" prop="catalog">
          <el-select v-model="form.catalog" placeholder="请选择">
            <el-option
              v-for="item in directorysSimpleList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 企业 -->
        <el-form-item label="企业:" prop="company">
          <el-select v-model="form.company" placeholder="请选择">
            <el-option
              v-for="item in companysList"
              :key="item.value"
              :label="item.company"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 城市 -->
        <el-form-item label="城市:" prop="region">
          <!-- 省份 -->
          <el-select
            v-model="form.provinces"
            placeholder="请选择"
            @focus="getProvincesList"
          >
            <el-option
              v-for="item in provincesList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <!-- 城市 -->
          <el-select
            v-model="form.region"
            placeholder="请选择"
            @focus="getCitysList"
            style="margin-left: 10px"
          >
            <el-option
              v-for="item in citysList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 方向 -->
        <el-form-item label="方向:" prop="direction">
          <el-select
            v-model="form.direction"
            placeholder="请选择"
            @focus="getDirectionList"
          >
            <el-option
              v-for="item in directionList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 单选题型 -->
        <el-form-item label="题型:" prop="resource">
          <el-radio-group v-model="form.types">
            <el-radio
              v-for="item in questionType"
              :key="item.value"
              :label="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 单选难度 -->
        <el-form-item label="难度:" prop="resource">
          <el-radio-group v-model="form.difficulty">
            <el-radio
              v-for="item in difficulty"
              :key="item.value"
              :label="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 题干 -->
        <el-form-item label="题干:" prop="textValue1">
          <questions-context v-model="form.textValue1"> </questions-context>
        </el-form-item>
        <!-- 选项 -->
        <questions-option
          :form="form"
          :optionsList="optionsList"
          @allOptions="saveOptions"
        ></questions-option>
        <!-- 解析视频 -->
        <el-form-item label="解析视频:">
          <el-row>
            <el-col :span="8">
              <el-input v-model="form.videoUrl"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <!-- 答案解析 -->
        <el-form-item label="答案解析:" prop="textValue2">
          <questions-context v-model="form.textValue2"></questions-context>
        </el-form-item>
        <!-- 题目备注 -->
        <el-form-item label="题目备注:">
          <el-row>
            <el-col :span="8">
              <el-input
                type="textarea"
                v-model="form.remark"
                :rows="5"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <!-- 试题标签 -->
        <el-form-item label="试题标签:">
          <el-select
            v-model="form.tags"
            placeholder="请选择试题标签"
            multiple
            filterable
            allow-create
            default-first-option
          >
            <el-option
              v-for="item in tagsList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 确认提交 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm">确认提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import questionsContext from '../components/questionsNew/questions-context.vue'
import { simple as subjectSimple } from '@/api/hmmm/subjects'
import { simple as directorysSimple } from '@/api/hmmm/directorys'
import { list as companysList } from '@/api/hmmm/companys'
import {
  add as addQuestions,
  detail as detailQuestions
} from '@/api/hmmm/questions'
import {
  provinces as provincesList,
  citys as citysList
} from '@/api/hmmm/citys'
import {
  direction as directionList,
  questionType,
  difficulty
} from '@/api/hmmm/constants'
import QuestionsOption from '../components/questionsNew/questions-option.vue'

export default {
  name: 'questions-new',
  components: { questionsContext, QuestionsOption },
  data () {
    return {
      form: {
        name: '',
        // 学科
        subject: '',
        // 目录
        catalog: '',
        // 企业
        company: '',
        // 省份
        provinces: '',
        // 地区
        region: '',
        // 方向
        direction: '',
        // 题型
        types: 1,
        // 难度
        difficulty: 1,
        // 题干
        textValue1: '',
        // 解析
        textValue2: '',
        // 解析视频
        videoUrl: '',
        // 题目备注
        remark: '',
        // 标签
        tags: []
      },
      // 校验规则
      rules: {
        // 学科
        subject: [{ required: true, message: '请选择学科', trigger: 'change' }],
        // 目录
        catalog: [{ required: true, message: '请选择目录', trigger: 'change' }],
        // 企业
        company: [
          { required: true, message: '请选择企业 ', trigger: 'change' }
        ],
        // 地区
        region: [{ required: true, message: '请选择完整地区' }],
        // 方向
        direction: [
          { required: true, message: '请选择企业 ', trigger: 'change' }
        ],
        // 题干
        textValue1: [
          { required: true, message: '请输入题干 ', trigger: 'change' }
        ],
        // 解析
        textValue2: [
          { required: true, message: '请输入答案解析 ', trigger: 'change' }
        ]
      },
      questionId: '',
      // 简单学科列表
      SubjectSimpleList: [],
      // 目录列表
      directorysSimpleList: [],
      // 企业列表
      companysList: [],
      // 省份列表
      provincesList: [],
      // 城市列表
      citysList: [],
      // 方向列表
      directionList: [],
      // 题目类型
      questionType: [],
      // 难度
      difficulty: [],
      // 选项列表
      optionsList: [],
      // 试题标签列表
      tagsList: []
    }
  },
  created () {
    this.getSubjectSimpleList()
    this.getCompanysList()
    this.questionType = questionType
    this.difficulty = difficulty
    this.questionId = this.$route.query.id
    this.getdetailQuestions()
  },
  methods: {
    async getdetailQuestions () {
      if (!this.questionId) return
      const res = await detailQuestions({ id: this.questionId })
      console.log(res)
      // console.log(res.data.options.sort((a, b) => { return a.id - b.id }))
      const data = res.data
      this.form.subject = data.subjectID
      this.form.catalog = data.catalogID
      this.form.company = data.enterpriseID
      this.form.provinces = data.province
      this.form.region = data.city
      this.form.direction = data.direction
      this.form.types = Number(data.questionType)
      this.form.difficulty = Number(data.difficulty)
      this.form.textValue1 = data.question
      this.form.videoUrl = data.videoURL
      this.form.textValue2 = data.answer
      this.form.remark = data.remarks
      this.optionsList = data.options.sort((a, b) => { return a.id - b.id })
      this.form.tags = (data.tags).split(',')
    },
    // 获取选项内容
    saveOptions (e) {
      // console.log(e)
      this.optionsList = e
    },
    // 获取简单学科列表
    async getSubjectSimpleList () {
      const res = await subjectSimple()
      this.SubjectSimpleList = res.data
    },
    // 根据学科id获取目录列表
    async getSubject () {
      const res = await directorysSimple(this.form.subject)
      // console.log(res)
      console.log(this.form.subject)
      this.directorysSimpleList = res.data
      // console.log(res.data)
      res.data.forEach((item) => {
        this.tagsList.push(item.label)
      })
    },
    // 获取企业列表
    async getCompanysList () {
      const res = await companysList()
      this.companysList = res.data.items
    },
    // 获取省份列表
    getProvincesList () {
      this.provincesList = provincesList()
    },
    // 获取城市列表
    getCitysList () {
      this.citysList = citysList(this.form.provinces)
    },
    // 获取方向列表
    getDirectionList () {
      this.directionList = directionList
    },
    // 提交按钮
    async submitForm () {
      await this.$refs.form.validate()
      await addQuestions({
        subjectID: this.form.subject,
        catalogID: this.form.catalog,
        enterpriseID: this.form.company,
        province: this.form.provinces,
        city: this.form.region,
        direction: this.form.direction,
        questionType: this.form.types.toString(),
        difficulty: this.form.difficulty.toString(),
        question: this.form.textValue1,
        videoURL: this.form.videoUrl,
        answer: this.form.textValue2,
        remarks: this.form.remark,
        options: this.optionsList,
        tags: this.form.tags.toString()
      })
      this.$message.success('试题录入成功')
      this.$router.push('/questions/list')
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-upload--picture-card {
  width: 100px;
  height: 50px;
  line-height: 50px;
  margin-left: 10px;
}
.upload {
  position: relative;
  .el-upload--picture-card i {
    position: absolute;
    top: -8px;
    right: 8px;
    font-size: 18px;
  }
}
::v-deep .el-form-item__label {
  width: 83px !important;
}
</style>
